<template>
  <div class="h-table">
    <div class="table-header table-row">
      <div
        class="table-cell"
        :style="`width: ${getWidth(item)}`"
        v-for="(item, index) in option"
        :key="index"
      >
        {{ item.label }}
      </div>
    </div>
    <div
      class="table-body"
      :id="id"
      @mouseenter="mouseenter"
      @mouseleave="mouseleave"
    >
      <div
        class="scroll-wrap"
        :id="data.length > 0 ? `scroll_wrap_${id}` : ''"
        :style="`animation-duration: ${time}s`"
      >
        <div
          class="table-row"
          :class="{ hasBgc: index % 2 === 0 }"
          v-for="(item, index) in data"
          :key="index"
          :ref="'row_' + index"
          @click="handleClick(item)"
        >
          <div
            class="table-cell"
            :style="`width: ${getWidth(t)}`"
            :title="item.productName"
            v-for="(t, i) in option"
            :key="i"
          >
            {{ item[t.prop] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: "h_table_body",
    },
    styleId: {
      type: String,
      default: "custom_style_with_bigbao",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    option: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      initMt: 0,
      visible: true,
      stop: false,
      time: 0,
      initMoveFlag: false, // 是否可上下移动
      initHeightValue: 0, // 移动的具体距离
      initStyleValue: null,
    };
  },
  methods: {
    handleClick(row) {
      this.$emit("handleClick", row);
    },
    // 初始化滚动样式的style标签
    initStyle() {
      // 判断是否已经创建了这个样式标签
      var myHeadStyle = document.getElementById(this.styleId);
      if (myHeadStyle) {
        return;
      }
      // 创建style标签备用
      const style = document.createElement("style");
      // 设置style属性
      style.type = "text/css";
      // 将 keyframes样式写入style内
      style.innerHTML = `/*hello world*/`;
      style.id = this.styleId;
      // 将style样式存放到head标签
      document.getElementsByTagName("head")[0].appendChild(style);
    },
    // 初始化滚动样式
    setStyle(number) {
      // 获取刚刚创建的自定义的style，以后每次就修改这个style
      var myHeadStyle = document.getElementById(this.styleId);
      const bodyDom = document.getElementById(this.id);
      const bodyHeight = bodyDom.offsetHeight;
      const scrollHeight = number * 35;
      // 当内容的高度大于body高度，进行滚动
      if (scrollHeight > bodyHeight) {
        this.initMoveFlag = true; // 允许移动
        const height = scrollHeight - bodyHeight;
        this.initHeightValue = height * -1;
        this.time = parseInt(height / 35) * 3 || 3;
        const keyFrames = `
          #scroll_wrap_${this.id} {
            position: relative;
            animation-name: ${this.id}_scroll;
            animation-timing-function: linear;
            animation-delay: infinite;
            animation-direction: normal;
            animation-iteration-count: infinite;
          }
          @keyframes ${this.id}_scroll {
          0% {
            top: 0;
          }
          100% {
            top: -${height}px;
          }
        }`;
        myHeadStyle.innerHTML = keyFrames;
      } else {
        myHeadStyle.innerHTML = "";
      }
    },
    // 判断当前行的宽度
    getWidth(row) {
      if (row.width) {
        return row.width + "px";
      } else {
        let width = 0;
        let number = this.option.length;
        for (let item of this.option) {
          if (row.width) {
            number -= 1;
            width += item.width;
          }
        }
        return `calc((100% - ${width}px) / ${number})`;
      }
    },
    // 鼠标移入，通过监听滚轮进行表的上下移动
    mouseenter() {
      if (!this.initMoveFlag) return;
      const dom = document.getElementById(`scroll_wrap_${this.id}`);
      const initStyle = dom.getAttribute("style");
      this.initStyleValue = initStyle;
      let top = parseFloat(window.getComputedStyle(dom).top);
      window.onwheel = (ev) => {
        top = top - ev.deltaY * 0.1;
        if (top > 0) {
          top = 0;
        } else if (top < this.initHeightValue) {
          top = this.initHeightValue;
        }
        dom.setAttribute(
          "style",
          `${initStyle}top: ${top}px;animation-name: null;`
        );
      };
    },
    // 鼠标移出后，移出手动移动样式
    mouseleave() {
      const dom = document.getElementById(`scroll_wrap_${this.id}`);
      dom.setAttribute("style", this.initStyleValue);
    },
  },
  watch: {
    data: {
      handler(val) {
        setTimeout(() => {
          this.setStyle(val.length);
        }, 0.5 * 1000);
      },
      deep: true,
    },
  },
  mounted() {
    this.initStyle();
  },
};
</script>
<style lang="scss" scoped>
$cellHeight: 35px;
.h-table {
  height: 100%;
  cursor: default;
  padding: 10px 0 0;
  .table-row {
    display: flex;
    line-height: 35px;
    height: 35px;
    transition: all 0.3s;
  }
  .table-header {
    background-color: rgba(12, 41, 80, 0.5);
    color: #fff;
    border: 1px solid #154180;
    line-height: 30px;
    height: 30px;
  }
  .table-cell {
    text-align: left;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
  }
  .table-body {
    height: calc(100% - 35px);
    overflow-y: hidden;
    .table-row {
      color: #fff;
      cursor: pointer;
    }
    .hasBgc {
      background: rgba(20, 60, 120, 0.5);
    }
  }
}
.hidden-row {
  height: 0 !important;
  line-height: 0 !important;
  display: none !important;
}

.scroll-wrap:hover {
  animation-play-state: paused;
}
</style>
